<template>
  <div class="home-container">
    <div class="navigation-bar">
      <navigation-component />
    </div>
    <div class="carousel-area">
      <carousel-component />
    </div>
  </div>
</template>

<script>
import navigationComponent from "@/components/首页组件/navigation.vue";
import carouselComponent from "@/components/首页组件/carousel.vue";

export default {
  name: "Home",
  components: {
    navigationComponent,
    carouselComponent
  }
}
</script>

<style scoped>
.home-container {
  display: flex;
  width: 100%; /* 自适应屏幕宽度 */
  margin: 0 auto; /* 居中显示 */
  padding: 20px; /* 增加内边距 */
}

.navigation-bar {
  width: 200px;
  padding: 10px;
  background-color: #f8f8f8;
  margin-right: 20px; /* 增加右侧间距 */
}

.carousel-area {
  flex: 1;
  padding: 10px;
  background-color: #fff; /* 设置背景颜色 */
}
</style>